<template>
<view>
<!--pages/topicality/kaixueshijian/kaixueshijian.wxml-->
<view>
  <image src="http://m.suzhou.bendibao.com/news/sujiafangjia/images/head.png?2020" class="main-img"></image>
  <!-- 开学时间 -->
  <view class="schooltime-box">
    <view v-for="(info, index) in summerTime" :key="index" class="time-detail" v-if="info.list">
      <view class="time-title">{{city}}{{info.name=='大学'?'高校':info.name}}开学时间</view>
      <view class="time-text">
        <view v-for="(item, index2) in info.list" :key="index2" class="time-content" @tap="navDetail" :data-id="item.id" :data-type="item.type">
          <view style="color:#141414">{{item.vacationtime}}</view>
          <view style="color:#6A6A6A">天数：{{item.tian}}</view>
          <view style="color:#3EA5FF" v-if="item.id!=0">查看详情</view>
        </view>
      </view>
    </view>
  </view>
</view>

<!-- 导粉 -->
  <view class="daofen" v-if="daofen">
    <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text">
    </rich-text>
  </view>

<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav" :showShare="showShare"></fastnav>
</view>
</template>

<script>
// pages/topicality/kaixueshijian/kaixueshijian.js
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
import fastnav from "../../../component/fastnav/fastnav";

export default {
  data() {
    return {
      showNav: true,
      // 快捷导航是否展开
      showShare: true,
      // 显示分享按钮
      tAppid: app.globalData.tAppid,
      textraData: app.globalData.textraData,
      city: "",
      summerTime: [],
      daofen: false,
      citycode: "",
      qrcodeimg: "",
      title: ""
    };
  },

  components: {
    fastnav
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      citycode: options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
    });
    util.getUrl(app.globalData.url).then(res => {
      // 获取城市公众号二维码
      util.cityConfig(this.citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
      util.cityList().then(res => {
        let citydata = res.allcity.filter(v => v.citycode == this.citycode);
        this.setData({
          city: Array.isArray(citydata) ? citydata[0].cityname : uni.getStorageSync("city")
        });
      });
      this.getSchoolData();
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.title ? this.title : "暑假放假时间"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.title ? this.title : "暑假放假时间",
      imageUrl: "http://m.suzhou.bendibao.com/news/sujiafangjia/images/head.png?2020",
      query: {
        city: this.citycode
      }
    };
  },
  methods: {
    getSchoolData() {
      let data = {
        action: "summer",
        citycode: this.citycode
      };
      util.request('zhuanti.php', data).then(res => {
        uni.setNavigationBarTitle({
          title: res.data.data ? res.data.data.title : "暑假放假时间"
        });

        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
        }

        this.setData({
          summerTime: res.data.data.summer,
          daofen: res.data.data.daofen,
          title: res.data.data.title
        });
      });
    },

    // 查看详情
    navDetail(e) {
      let id = e.currentTarget.dataset.id;
      let type = e.currentTarget.dataset.type;
      uni.navigateTo({
        url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + this.citycode
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    }
  }
};
</script>
<style>
/* pages/topicality/kaixueshijian/kaixueshijian.wxss */
.main-img{width: 100%;height: 276rpx;}
.schooltime-box{margin:0 40rpx;padding-bottom: 50rpx;}
.time-detail{box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.16);opacity:1;border-radius:20rpx;margin: 52rpx 0;}
.time-title{background:rgba(62,165,255,1);opacity:1;border-radius:20rpx 20rpx 0rpx 0rpx;
padding: 15rpx 0;text-align: center;font-size:32rpx;font-family:PingFang SC;
font-weight:600;line-height:44rpx;color:rgba(255,255,255,1);}
.time-text{padding:0 40rpx;}
.time-content{display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-bottom: 2rpx solid rgba(226,226,226,1);padding: 30rpx 0;}
.time-content:last-child{border: 0;}
.time-content view{font-size:28rpx;font-family:PingFang SC;font-weight:500;line-height:40rpx;opacity:1;}

/* 相关资讯 */
.related-info-box{border-top: 15rpx solid rgba(238,238,238,1);}
/* 导粉 */
.daofen{margin:0 30rpx 80rpx 30rpx;text-align: center;}
.p_class{margin:10rpx 30rpx;line-height: 50rpx;}

</style>